<!-- eslint-disable no-console -->
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import TheExperience from './TheExperience.vue'
</script>

<template>
  <TresCanvas window-size clear-color="gray">
    <TheExperience />
  </TresCanvas>

  <OverlayInfo>
    <h1>&lt;primitive :object="..." &gt; </h1>
    <h2>Setup</h2>
    <p>This scene contains multiple primitives whose :object props are swapped periodically.</p>
    <h2>Warning</h2>
    <p>The examples in this file are largely not officially supported. Officially, Tres assumes that primitives have no Vue children. But this files contains nested Vue children, including nested primitives.</p>
    <h2>Context</h2>
    <a href="https://github.com/Tresjs/tres/issues/701">Issue #701</a>
    <h2>Preview</h2>
    <p>The scene should alternate between these 2 images.</p>
    <img src="" />
  </OverlayInfo>
</template>

<style scoped>
.overlay {
  position: fixed;
  max-width: 400px;
  top: 0px;
  left: 0px;
  margin: 10px;
  padding: 10px;
  background-color: white;
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 14px;
  color: #444;
}
</style>
